<template>
  <div class="view">
    <x-header :left-options="{ backText: '' }"
              class="vux-1px-b">商家入驻</x-header>
    <step v-model="step"
          background-color="#f7f7f7">
      <step-item title="商家信息"
                 class="step-item"></step-item>
      <step-item title="店铺信息"
                 class="step-item"></step-item>
      <step-item title="企业信息"
                 class="step-item"></step-item>
    </step>
    <div class="content">
      <div class="tooltip margin-bottom"
           v-if="form.seller_status === -1">
        <h3>拒绝原因</h3>
        <p>{{ form.seller_status_desc || "无" }}</p>
      </div>
      <group title="店铺信息"
             class="margin-bottom">
        <cell title="店铺Logo"
              :primary="'content'">
          <uploader :images="logoImgData"
                    :handle-click="false"
                    :show-header="false"
                    :show-tip="false"
                    :autoUpload="true"
                    :uploadUrl="'/UploadFile/Upload'"
                    :autoRemove="true"
                    :removeUrl="'/UploadFile/Remove'"></uploader>
        </cell>
        <cell title="店铺封面"
              :primary="'content'">
          <uploader :images="headImgData"
                    :handle-click="false"
                    :show-header="false"
                    :show-tip="false"
                    :autoUpload="true"
                    :uploadUrl="'/UploadFile/Upload'"
                    :autoRemove="true"
                    :removeUrl="'/UploadFile/Remove'"></uploader>
        </cell>
        <x-input title="店铺名称"
                 placeholder="店铺名称"
                 v-model="form.shop_name"
                 :max="50"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <x-input title="商铺电话"
                 placeholder="请输入商铺电话"
                 :max="13"
                 v-model="form.shop_phone"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <x-input title="24小时电话"
                 placeholder="请输入24小时电话"
                 :max="13"
                 v-model="form.hours_phone"
                 placeholder-align="right"
                 text-align="right"></x-input>
      </group>
      <group title="收款账户"
             class="margin-bottom">
        <popup-picker title="账号类型"
                      placeholder="请选择类型"
                      :columns="1"
                      :data="typeData"
                      v-model="account_type"
                      @on-change="onSellerTypeChange"></popup-picker>
        <x-input title="姓名"
                 placeholder="请填写开户名"
                 v-model="form.account_name"
                 :max="50"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <x-input title="账号"
                 placeholder="请输入账号"
                 v-model="form.account_number"
                 :max="50"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <x-input title="开户银行"
                 placeholder="请输入开户银行"
                 v-model="form.bank_name"
                 :max="50"
                 placeholder-align="right"
                 text-align="right"
                 v-if="isinput"></x-input>
        <x-input title="开户支行"
                 placeholder="请输入开户支行"
                 v-model="form.branch_name"
                 :max="50"
                 placeholder-align="right"
                 text-align="right"
                 v-if="isinput"></x-input>
        <x-input title="开户行详细地址"
                 placeholder="请输入开户行详细地址"
                 v-model="form.branch_address"
                 :max="50"
                 placeholder-align="right"
                 text-align="right"
                 v-if="isinput"></x-input>
        <x-switch title="是否启用"
                  :value-map="['0', '1']"
                  v-model="form.is_enabled"></x-switch>
        <x-textarea v-model="form.account_desc"
                    :max="100"
                    :rows="5"
                    :placeholder="'请输入文字备注'"
                    :show-counter="false"></x-textarea>
      </group>
    </div>
    <fixed-bot-btn @click="nextClick">下一步</fixed-bot-btn>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import { Group, XInput, XButton, Step, StepItem, Cell, XHeader, XSwitch, XTextarea, PopupPicker } from 'vux'
import Uploader from '@comps/uploader/uploader'
import fixedBotBtn from '@comps/fixedBotBtn'

export default {
  components: {
    XHeader,
    Step,
    StepItem,
    Group,
    XInput,
    XButton,
    Uploader,
    Cell,
    fixedBotBtn,
    XSwitch,
    XTextarea,
    PopupPicker
  },
  data () {
    return {
      typeData: ['银行卡', '支付宝', '微信'],
      step: 1,
      form: {},
      isinput: 1,
      account_type: [],
      logoImgData: [],
      headImgData: []
    }
  },
  computed: {
    ...mapState(['token', 'user'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    loadForm () {
      let jsonStr = sessionStorage.getItem('sellerRegisterForm')
      this.form = JSON.parse(jsonStr)
      let self = this
      if (this.form.seller_logo && this.form.seller_logo.length > 0) {
        self.logoImgData.slice(0, self.logoImgData.length)
        self.logoImgData.push({ url: self.form.seller_logo })
      }

      if (this.form.seller_head_img && this.form.seller_head_img.length > 0) {
        self.headImgData.slice(0, self.headImgData.length)
        self.headImgData.push({ url: self.form.seller_head_img })
      }
    },
    isValid () {
      if (!this.form.shop_phone || this.form.shop_phone.length === 0) {
        this.$toastText('请先输入商铺电话！')
        return false
      }
      if (!this.form.hours_phone || this.form.hours_phone.length === 0) {
        this.$toastText('请先输入商铺24小时电话！')
        return false
      }
      return true
    },
    // 收款账户类型切换
    onSellerTypeChange (val) {
      if (val && val.length > 0) {
        switch (val[val.length - 1]) {
          case '银行卡':
            this.form.account_type = 0
            this.isinput = 1
            break
          case '支付宝':
            this.form.account_type = 1
            this.isinput = 0
            break
          case '微信':
            this.form.account_type = 2
            this.isinput = 0
            break
        }
      }
    },
    // 下一步
    async nextClick () {
      if (this.isValid()) {
        if (this.logoImgData.length >= 1) {
          this.form.seller_logo = this.logoImgData[0].url
        }

        if (this.headImgData.length >= 1) {
          this.form.seller_head_img = this.headImgData[0].url
        }
        sessionStorage.setItem(
          'sellerRegisterForm',
          JSON.stringify(this.form)
        )
        this.$router.push('/sellerRegisterStep' + (this.step + 1))
      }
    }
  },
  created () {
    this.loadForm()
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/pub";

.content {
  padding-top: $default_toolbar_height;
  height: calc(
    100% - #{$default_navbar_height} - #{$default_buytoolbar_height}
  );
}

.tooltip {
  padding: .25rem;
  margin: .25rem;
  color: #df9d35;
  background: #fffbe6;
  p {
    margin-top: .125rem;
    width: 100%;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: -.02375rem -.07125rem .16125rem .00125rem rgba(8, 1, 3, 0.27);
  border: 0;
}
</style>

<style lang="scss">
@import "../../assets/css/pub";

.vux-step {
  position: fixed;
  top: $default_navbar_height;
  left: 0;
  padding: .375rem;
  width: 100%;
  height: $default_buytoolbar_height;
  background-color: $default_background_color;
  z-index: 9;
}
.vux-step-item-title {
  font-size: $default_font_size !important;
}
.weui-cells:before {
  z-index: 1;
}
.vux-step-item-icon {
  width: auto !important;
}
</style>
